import React from 'react'
import './index.css'
import { nanoid } from 'nanoid'

export default function Header({todoList,setTodoList}) {//第四步：在头部组件中在形参中接收
  //第六步：抬起事件函数(为什么一定要const)
 const publishHandle =(e) =>{
      //6-1:如果点击的不是回车，直接return(???)
      if(e.keyCode!=13) return
      //6-2:如果输入的内容为空，给出提示
      const publishValue = e.target.value.trim()
      if(!publishValue){
          return alert('请输入正确的内容')
      }
      //6-3 创建新的todo对象
      const newTodo ={id:nanoid(),todo:publishValue,done:false}
      //6-4 通过父组件传过来的setTodoList方法，把newTodo加进去
      //点击添加时，新的数据肯定在最前面
      setTodoList([newTodo,...todoList])
      //6-5 添加成功后，清空输入框
      e.target.value = ''
  }
  return (
    <div className="todo-header">
      {/* //第五步:给input框绑定键盘抬起事件 */}
        <input type="text"  onKeyUp={publishHandle} placeholder="请输入你的任务名称，按回车键确认"/>
    </div>
  )
}


